<template>
    <div class="h-100 overflow-y-auto no-code">
        <Breadcrumbs />

        <hr class="m-0">

        <Editor
            :metadata
            @update-metadata="(k, v) => emit('updateMetadata', {[k]: v})"
            @update-task="(yaml) => emit('updateTask', yaml)"
            @reorder="(yaml) => emit('reorder', yaml)"
            @update-documentation="(task) => emit('updateDocumentation', task)"
        />
    </div>
</template>

<script setup lang="ts">
    import {computed, watch, inject, provide, ref} from "vue";
    import * as YAML_UTILS from "@kestra-io/ui-libs/flow-yaml-utils";

    import {
        BREADCRUMB_INJECTION_KEY, CLOSE_TASK_FUNCTION_INJECTION_KEY,
        CREATE_TASK_FUNCTION_INJECTION_KEY, CREATING_TASK_INJECTION_KEY,
        EDIT_TASK_FUNCTION_INJECTION_KEY, BLOCKTYPE_INJECT_KEY,
        PANEL_INJECTION_KEY, POSITION_INJECTION_KEY,
        REF_PATH_INJECTION_KEY, PARENT_PATH_INJECTION_KEY,
        TOPOLOGY_CLICK_INJECTION_KEY, FLOW_INJECTION_KEY,
    } from "./injectionKeys";
    import Breadcrumbs from "./components/Breadcrumbs.vue";
    import Editor from "./segments/Editor.vue";
    import {Breadcrumb, BlockType, TopologyClickParams} from "./utils/types";

    const topologyClick = inject(TOPOLOGY_CLICK_INJECTION_KEY, ref());

    watch(topologyClick, (value: TopologyClickParams | undefined) => {
        if (!value) return;

        const {action, params} = value;
        const {id, section} = params;

        // FIXME manage create and edit task from topology
        if (action === "create") {
            // find the path of the block with id
            // and create a new task
            emit("createTask", "tasks", section, 0)
            return
        } else if(action === "edit"){
            emit("editTask", "tasks", section+id, 0)
        }
    }, {deep: true});

    const emit = defineEmits<{
        (e: "updateTask", yaml: string): void
        (e: "updateMetadata", value: {[key: string]: any}): void
        (e: "updateDocumentation", task: string): void
        (e: "reorder", yaml: string): void
        (e: "createTask", blockType: string, parentPath: string, refPath: number | undefined): boolean | void
        (e: "editTask", blockType: string, parentPath: string, refPath: number): boolean | void
        (e: "closeTask"): boolean | void
    }>()

    const props = withDefaults(
        defineProps<{
            flow: string;
            /**
             * The path of the parent block
             */
            parentPath?: string;
            /**
             * Type of block to create
             */
            blockType?: BlockType | "pluginDefaults";
            /**
             * Initial block index when opening
             * a no-code panel from topology
             */
            refPath?: number;
            creatingTask?: boolean;
            position?: "before" | "after";
        }>(), {
            creatingTask: false,
            position: "after",
            refPath: undefined,
            blockType: undefined,
            parentPath: undefined,
        });

    const metadata = computed(() => YAML_UTILS.getMetadata(props.flow));

    const creatingTaskRef = ref(props.creatingTask)
    const breadcrumbs = ref<Breadcrumb[]>([])
    const panel = ref()

    provide(FLOW_INJECTION_KEY, computed(() => props.flow));
    provide(PARENT_PATH_INJECTION_KEY, props.parentPath ?? "");
    provide(REF_PATH_INJECTION_KEY, props.refPath);
    provide(PANEL_INJECTION_KEY, panel)
    provide(BREADCRUMB_INJECTION_KEY, breadcrumbs);
    provide(BLOCKTYPE_INJECT_KEY, props.blockType);
    provide(POSITION_INJECTION_KEY, props.position);
    provide(CREATING_TASK_INJECTION_KEY, computed(() => creatingTaskRef.value));
    provide(CREATE_TASK_FUNCTION_INJECTION_KEY, (blockType, parentPath, refPath) => {
        emit("createTask", blockType, parentPath, refPath)
    });
    provide(EDIT_TASK_FUNCTION_INJECTION_KEY, (blockType, parentPath, refPath) => {
        emit("editTask", blockType, parentPath, refPath)
    });
    provide(CLOSE_TASK_FUNCTION_INJECTION_KEY, () => {
        if (breadcrumbs.value[breadcrumbs.value.length - 1].component) {
            breadcrumbs.value.pop();
        } else {
            // only close the tab if saving a task not a value
            emit("closeTask")
        }

    })
</script>

<style scoped lang="scss" src="./styles/code.scss" />
